<template>
	<view class="px-2 animate__animated animate__fast animate__fadeIn bg-white" >
		<!-- 头像昵称|关注按钮 垂直居中&两边对齐 -->
		<view class="flex align-center justify-between ">
			<!-- left | 垂直居中-->
			<view class="flex align-center">
				<!-- 头像 -->
				<image class="rounded-circle mr-2" :src="item.useravatar" 
				style="width:65rpx;height: 65rpx;" lazy-load mode=""
				lazy-load
				></image>
				<!-- 昵称发布时间 -->
				<view>
					<view style="font-size: 30rpx;line-height: 1.5;">{{item.username}}</view>
					<text class="font-sm text-light-muted" style="line-height:1.5;">{{item.cd}}</text>
				</view>
			</view>
	
		</view>
		<!-- 标题 -->
		<view class="font-md my-1 font-weight-600"  @click="openDetail">
			{{item.article_title}}
		</view>
		
		<view class="overflow-line-3">
			{{ item.article_content }}
		</view>
		<!-- 帖子详情 -->
		<slot>
			<!-- 图片 -->
			<image v-if="item.single_cover" :src="item.single_cover" 
			class="rounded w-100" style="height:350rpx;"
			@click="openDetail">
			</image>
		</slot>
	
	</view>
</template>

<script>
	export default{
		//接受参数
		props:{
			item:Object,
			index:{
				type:Number,
				default:-1
			},
			isDetail:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			
			//进入详情页
			openDetail(){
				if(this.isDetail)return//处于详情页终止
				uni.setStorageSync('articledetail',JSON.stringify(this.item) )
				uni.navigateTo({
					url: '/pages/article/detail'
				});
			},
			
			
		}
	}
</script>

<style>
</style>
